<template>
  <div>
    <h2>修改专家信息</h2>
    <table width="50%" border="0" align="center" cellpadding="0" cellspacing="1">
      <tbody>
      <tr>
        <td width="17%" height="20" align="right" bgcolor="#f3f3f3">名称</td>
        <td width="3%" height="20" align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" colspan="2" bgcolor="#f3f3f3"><input type="text" name="name"
                                                             v-model="expert.name"/></td>
      </tr>
      <tr>
        <td height="20" align="right" bgcolor="#f3f3f3">单位名称</td>
        <td height="20" align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" colspan="2" bgcolor="#f3f3f3"><input type="text" name="unitname" id="unitname"
                                                             v-model="expert.unitname"/></td>
      </tr>
      <tr>
        <td height="20" align="right" bgcolor="#f3f3f3">国籍</td>
        <td height="20" align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" colspan="2" bgcolor="#f3f3f3"><input type="text" name="nation" id="nation"
                                                             v-model="expert.nation"/></td>
      </tr>
      <tr>
        <td height="20" align="right" bgcolor="#f3f3f3">性别</td>
        <td height="20" align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" colspan="2" bgcolor="#f3f3f3"><select name="sex" v-model="expert.sex">
          <option value="1">男</option>
          <option value="0">女</option>
        </select></td>
      </tr>
      <tr>
        <td height="20" align="right" bgcolor="#f3f3f3">职称</td>
        <td height="20" align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" colspan="2" bgcolor="#f3f3f3"><input type="text" name="title" id="title"
                                                             v-model="expert.title"/></td>
      </tr>
      <tr>
        <td height="20" align="right" bgcolor="#f3f3f3">电话</td>
        <td height="20" align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" colspan="2" bgcolor="#f3f3f3"><input type="text" name="tel" id="tel"
                                                             v-model="expert.tel"/></td>
      </tr>
      <tr>
        <td height="20" align="right" bgcolor="#f3f3f3">简介</td>
        <td height="20" align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" colspan="2" bgcolor="#f3f3f3"><input type="text" name="introduction"
                                                             id="introduction" v-model="expert.introduction"/></td>
      </tr>
      <tr>
        <td height="30" colspan="2" bgcolor="#f3f3f3">&nbsp;</td>
        <td width="22%" height="30" bgcolor="#f3f3f3">
          <button @click="updateExpert()">修改</button>
        </td>
        <td width="58%" height="30" bgcolor="#f3f3f3"><input type="submit" name="Submit2" value="取消"/></td>
      </tr>
      </tbody>
    </table>
    <router-view/>
  </div>
</template>
<script>
import four from '../../util/four';

export default {
  data() {
    return {
      expert: {},
    }
  },
  mounted() {
    this.getExpert();
  },
  methods: {
    getExpert() {
      let uid = JSON.parse(sessionStorage.getItem("userid"));
      four.get("/experts/getByUid/" + uid).then((res) => {
        this.expert = res.data.data;
      })
    },
    updateExpert() {
      four.put("/experts", this.expert).then((res) => {
        if (res.data.code == 20031) {
          this.$message.success("修改成功！");
        }
        if (res.data.code == 20030) {
          this.$message.error("修改失败！");
        }
        this.getExpert();
      })

    },
  }
}

</script>
<style scoped>
.center {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>